<template>
	<div>
		<a-row class="mb-2" gutter="8">
			<a-col span="2">
				<a-select
					v-if="props.componentConfig.config"
					style="width: 100%"
					v-model:value="props.componentConfig.config.method"
				>
					<a-select-option key="GET" value="GET"></a-select-option>
					<a-select-option key="POST" value="POST"></a-select-option>
					<a-select-option key="PUT" value="PUT"></a-select-option>
					<a-select-option key="DELETE" value="DELETE"></a-select-option>
					<a-select-option key="HEAD" value="HEAD"></a-select-option>
					<a-select-option key="OPTIONS" value="OPTIONS"></a-select-option>
					<a-select-option key="PATCH" value="PATCH"></a-select-option>
				</a-select>
			</a-col>
			<a-col span="20">
				<a-input
					placeholder="请输入url"
					v-if="props.componentConfig.config"
					v-model:value="props.componentConfig.config.url"
				></a-input>
			</a-col>
			<a-col span="2">
				<a-button type="primary" @click="openStepTestDraw">发送</a-button>
			</a-col>

			<a-modal v-model:open="sendHttpFlag" title="请输入参数">
				<div class="jsoneditor" ref="jsonEditor" style="width: 100%; height: 400px"></div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="sendHttpFlag = false">取消</el-button>
						<el-button type="primary" @click="submit"> 提交 </el-button>
					</span>
				</template>
			</a-modal>
		</a-row>

		<a-row class="mb-2" gutter="8">
			<a-col :span="24">
				<a-collapse v-model:activeKey="activeKey">
					<a-collapse-panel key="1" header="url参数">
						<a-row class="mb-2" gutter="8">
							<a-col span="24">
								<!-- <QueryParamConfig :queryParamList="props.componentConfig?.config?.queryParamList"></QueryParamConfig> -->
								<KeyValueTable
									:height="500"
									:values="input"
									:rawEndOfEnterFlag="false"
									:config="props.componentConfig?.config?.queryParamConfig"
								>
								</KeyValueTable>
							</a-col>
						</a-row>
					</a-collapse-panel>
					<a-collapse-panel key="2" header="headers">
						<a-row class="mb-2" gutter="8">
							<a-col span="24">
								<KeyValueTable
									:height="500"
									:values="input"
									:rawEndOfEnterFlag="true"
									:config="props.componentConfig?.config?.headerConfig"
								>
								</KeyValueTable>
							</a-col>
						</a-row>
					</a-collapse-panel>
					<a-collapse-panel key="3" header="body">
						<HttpBodyTable
							:height="500"
							:values="input"
							:rawEndOfEnterFlag="true"
							:config="props.componentConfig?.config?.bodyConfig"
						>
						</HttpBodyTable>
					</a-collapse-panel>

					<a-collapse-panel key="4" header="response">
						<ParamDefine
							v-if="props.componentConfig?.config.responseConfig"
							:params="props.componentConfig?.config.responseConfig"
							:isViewBasicFieldFlag="false"
							:isViewArrayFlag="true"
							:isAddColumnFlag="true"
							:isActionColumnFlag="true"
							:isUpdateColumnFlag="true"
							:jsonEditorFlag="true"
							:isClearFlag="true"
							:isRemoveColumnFlag="true"
							:isAddChildrenColumnFlag="true"
							:isMappingColumnFlag="false"
							ref="left"
						></ParamDefine>
					</a-collapse-panel>
				</a-collapse>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import ParamDefine from '@/views/restapi/ParamDefine.vue'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import KeyValueTable from './KeyValueTable.vue'
import HttpBodyTable from './HttpBodyTable.vue'
import { Func } from '@/views/restapi/ParamDefineFunc.js'
import { parseDefineToJson } from '@/utils'
import processTestApi from '@/api/process/processTestApi'
import { message } from 'ant-design-vue'
import JsonEditor from 'jsoneditor'
import 'jsoneditor/dist/jsoneditor.min.css'

import { mergeStepConfigToFrontFile, hasProperties } from '@/utils'

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])

const defaultConfig = () => {
	return {
		config: {
			method: 'POST',
			url: '',
			queryParamConfig: {
				viewTypeCode: 'struct',
				splitOperator: '&',
				raw: '',
				struct: []
			},
			headerConfig: {
				viewTypeCode: 'struct',
				splitOperator: ';',
				raw: '',
				struct: []
			},
			bodyConfig: {
				viewTypeCode: 'body',
				file: null,
				body: {
					params: [],
					basicTypeFlag: false,
					isArrayFlag: false,
					isActionColumnFlag: true,
					isMappingColumnFlag: true,
					isViewAutoMappingFlag: true,
					isUpdateColumnFlag: true,
					isClearFlag: true,
					jsonEditorFlag: true
				}
			},
			responseConfig: {
				params: [
					{
						_key: 'response',
						fieldCode: 'response',
						fieldName: 'response',
						fieldType: 'Object',
						fieldDesc: '响应内容',
						defaultValue: null,
						children: null,
						editorFlag: false,
						_showChildren: true,
						isArrayFlag: false
					},
					{
						_key: 'headers',
						fieldCode: 'headers',
						fieldName: 'headers',
						fieldType: 'Object',
						fieldDesc: null,
						defaultValue: null,
						children: null,
						editorFlag: false,
						_showChildren: true,
						isArrayFlag: true
					}
				],
				basicTypeFlag: false,
				isArrayFlag: false
			}
		}
	}
}
const input = ref()
const activeKey = ref('')
const left = ref()
const jsonEditor = ref()
let paramEditor = null

const sendHttpFlag = ref(false)
onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.config = c.config
	}
	await queryInput()
})

const submit = async () => {
	//获取一把tid
	const tid = await processTestApi.getTid({})

	const value = paramEditor.get()

	let frontFile = mergeStepConfigToFrontFile(props.frontFile, props.nodeId, props.componentConfig)

	const obj = await processTestApi.runWithResultToFieldDefine({
		id: props.id,
		frontFile: frontFile,
		param: value,
		stepCode: props.nodeId,
		tid: tid
	})
	if (!obj) {
		return
	}
	props.componentConfig.config.responseConfig = obj
}

const openStepTestDraw = () => {
	sendHttpFlag.value = true
	//初始化
	if (!paramEditor) {
		nextTick(() => {
			initJsonEditor()
			updateTestParam()
		})
	} else {
		// updateTestParam()
	}
}

const initJsonEditor = () => {
	const options = {
		modes: ['code', 'tree', 'form', 'text', 'preview'],
		mode: 'code'
	}
	paramEditor = new JsonEditor(jsonEditor.value, options)
}

const updateTestParam = async () => {
	let define = parseDefineToJson(input.value)
	if (!define) {
		define = {
			'': ''
		}
	}
	paramEditor.update(define)
}

const queryInput = async () => {
	const c = await getInputDefine()
	const cb = Func.repairJson(c)
	input.value = cb
}
const getInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}
</script>
<style scoped></style>
